<template>
	<view  class="taobao_page">
		<view class="head_box">
			<view class="t_box">
				<image  class="t_img" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/new_user/23.png" mode="" @click="returnPage"></image>
				<view class="t_title">网购</view>
			</view>
		</view>
		<view class="tab_box">
			<view @click="bindTab(index)" class="tab_item" :class="currentIndex==index?'active':''" v-for="(item,index) in  bind" :key="index">{{item.name}}</view>
		</view>
		<view class="" v-if="currentIndex==0">
			<view class="head_boxs">
				<view class="inp_box">
				    <image class="img" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/new_user/24.png" mode=""></image>
					<input confirm-type="search" @confirm="bindSeg()" type="text" v-model="key" placeholder="请输入商品内容"  @blur="qk()" />	
				</view>
				<view class="btn" @click="bindSeg()">搜索</view>
			</view>
			<view class="goods_list">
				<view class="goods_item" v-for="(item,index) in collectList" :key="index" @click="toUrl(item.item_url)">
					<view class="goods_img">
						<image :src="item.pict_url" mode=""></image>
					</view>
					<view class="goods_name">
						<view class="tian" v-if="item.user_type==1">天猫</view>
						<view class="mz">{{item.title}}</view>
					</view>
					<view class="goods_sub">{{item.short_title}}</view>
					<view class="goods_dz">{{item.provcity}}</view>
					<view class="goods_jg">￥{{item.zk_final_price}}</view>
				</view>
			</view>
			<view class="goods_list" v-if="collectList.length==0" >
				<view class="goods_item" v-for="(item,index) in goodsList" :key="index" @click="toUrl(item.item_url)">
					<view class="goods_img">
						<image :src="item.pict_url" mode=""></image>
					</view>
					<view class="goods_name">
						<view class="tian" v-if="item.user_type==1">天猫</view>
						<view class="mz">{{item.title}}</view>
					</view>
					<view class="goods_sub">{{item.short_title}}</view>
					<view class="goods_dz">{{item.provcity}}</view>
					<view class="goods_jg">￥{{item.zk_final_price}}</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
		<view class="" v-if="currentIndex==1">
			<view class="head_boxs" >
				<view class="inp_box">
				    <image class="img" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/new_user/24.png" mode=""></image>
					<input confirm-type="search" @confirm="bindSe()" type="text" v-model="keys" placeholder="请输入搜索内容"  @blur="qk()" />	
				</view>
				<view class="btn" @click="bindSe()">搜索</view>
			</view>
			<view class="shop_list">
				<view class="shop_item" v-for="(item,index) in collectList" :key="index" @click="toUrl(item.shop_url)">
					<view class="shop_left">
						<image :src="item.pict_url" mode=""></image>
					</view>
					<view class="shop_right">
						<view class="shop_name">{{item.shop_title}}</view>
						<view class="shop_sub">{{item.seller_nick}}</view>
					</view>
				</view>
			</view>
			<view class="shop_list" v-if="collectList.length==0">
				<view class="shop_item" v-for="(item,index) in shopList" :key="index" @click="toUrl(item.shop_url)">
					<view class="shop_left">
						<image :src="item.pict_url" mode=""></image>
					</view>
					<view class="shop_right">
						<view class="shop_name">{{item.shop_title}}</view>
						<view class="shop_sub">{{item.seller_nick}}</view>
					</view>
				</view>
				<uni-load-more :status="loadingType"></uni-load-more>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		data() {
			return {
				bind:[
					{name:'商品'},
					{name:'商家'},
				],
				currentIndex:0,
				key:'',
				keys:'',
				collectList:[],
				shopList:[],
				goodsList:[],
				loadingType:'',
				page:1,
				PageSize:10,
				sjList:['手机','女装','美食','美妆','居家日用','男装','鞋品','数码家电','母婴','箱包','文娱车品']
			};
		},
		onReachBottom() {
			if(this.currentIndex==0){
				this.getGoods()
			}else if(this.currentIndex==1){
				this.getShop()
			}
			
			
		},
		computed: {
			
		},
		onLoad() {
			this.getShop()
			this.getGoods()
		},
		methods:{
			random(min, max) {
			  return Math.floor(Math.random() * (max - min)) + min;
			},
			returnPage(){
			    uni.navigateBack({
			     delta:1
			    })
			},
			bindTab(index){
				this.currentIndex=index
			},
			qk(){
				this.collectList.length=0
			},
			getShop(){
				uni.showLoading({
					title:'加载中'
				})
				let url="/api/taobao/api/searchShop"
				let params={
					v:'旗舰店',
					pageNo:this.page,
					PageSize:this.PageSize
				}
				this.Unfold_data.log_data(params, 'POST', url, res => {
					   uni.hideLoading()
						this.loadingType = 'more';
						if (res.data.results.n_tbk_shop== null||res.data.results.n_tbk_shop.length==0) {
							this.loadingType = 'noMore';
							return;
						}
						if (res.data.results.n_tbk_shop.length < 10) {
							this.loadingType = "noMore";
						}
						this.shopList = this.shopList.concat(res.data.results.n_tbk_shop);
						this.page = this.page+ 1;
				});
			},
			
			
			getGoods(){
				
				uni.showLoading({
					title:'加载中'
				})
				for (var i = 1; i <= 10; i++) {
				  let key=this.random(1,1000)
				  console.log(this.sjList[key])
				 let url="/api/taobao/api/searchGoods"
				 let params={
				 	v:key,
				 	pageNo:this.page,
				 	PageSize:this.PageSize
				 }
				 this.Unfold_data.log_data(params, 'POST', url, res => {
				 		uni.hideLoading()
				 		this.loadingType = 'more';
				 		if (res.data.result_list.map_data== null||res.data.result_list.map_data.length==0) {
				 			this.loadingType = 'noMore';
				 			return;
				 		}
				 		if (res.data.result_list.map_data.length < 10) {
				 			this.loadingType = "noMore";
				 		}
				 		this.goodsList = this.goodsList.concat(res.data.result_list.map_data);
				 		this.page = this.page+ 1;
				 });
				}
			},
			bindSeg(){
				
				let url="/api/taobao/api/searchGoods"
				let params={
					v:this.key,
					pageNo:this.page,
					PageSize:100
				}
				this.Unfold_data.log_data(params, 'POST', url, res => {
					    console.log(res)
						this.loadingType = 'more';
						if (res.data.result_list.map_data== null||res.data.result_list.map_data.length==0) {
							this.loadingType = 'noMore';
							return;
						}
						if (res.data.result_list.map_data.length < 10) {
							this.loadingType = "noMore";
						}
						this.collectList = this.collectList.concat(res.data.result_list.map_data);
						this.page = this.page+ 1;
				});
			},
			bindSe(){
				let url="/api/taobao/api/searchShop"
				let params={
					v:this.keys,
					pageNo:this.page,
					PageSize:100
				}
				this.Unfold_data.log_data(params, 'POST', url, res => {
					
						this.loadingType = 'more';
						if (res.data.results.n_tbk_shop== null||res.data.results.n_tbk_shop.length==0) {
							this.loadingType = 'noMore';
							return;
						}
						if (res.data.results.n_tbk_shop.length < 10) {
							this.loadingType = "noMore";
						}
						this.collectList = this.collectList.concat(res.data.results.n_tbk_shop);
						this.page = this.page+ 1;
				});
			},
			toUrl(url){
				var urlStr = url; //encodeURI(url)//把字符串作为url进行编码
				console.log(urlStr);
				if (urlStr.indexOf('/pages') == -1) {
					uni.setStorageSync('browse_url', urlStr);
					uni.navigateTo({
						url: '/pages/web/browse?url=1'
					});
				} 
			}
		}
	}
</script>

<style lang="scss" scoped>
.taobao_page{
	width: 750upx;
	.head_box{
		width: 750upx;
		height:160upx;
		background-color: #FFFFFF;
		box-shadow: 0px 8upx 16upx rgba(0, 0, 0, 0.08);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		.t_box{
			padding-top: 80upx;
			margin-left: 40upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.t_img{
				width: 20upx;
				height: 30upx
			}
			.t_title{
				margin-left: 30upx;
				font-size: 34upx;
				color: #444444;
				font-weight: bold;
			}
		}
	}
	.tab_box{
		margin: 190upx auto 0;
		width: 500upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.tab_item{
			font-size: 30upx;
			color: #333333;
		}
		.active{
			font-size: 30upx;
			color: #FF3333;
			border-bottom: 2px solid #FF3333;
		}
	}
	.head_boxs{
		width: 750upx;
		margin:30upx 20upx 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.inp_box{
			margin-left: 30upx;
			width: 540upx;
			height: 58upx;
			border: 2upx solid #FF4E00;
			border-radius: 29upx 0 0 29upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.img{
				width: 29upx;
				height: 28upx;
				margin-left: 20upx;
			}
			input{
				margin-left: 10upx;
			}
		}
		.btn{
			width: 100upx;
			height: 58upx;
			background-color: #FF4E00;
			text-align: center;
			line-height: 58upx;
			font-size: 26upx;
			color: #FFFFFF;
			border-radius: 0 29upx 29upx 0;
		}
	}
	.goods_list{
		width: 690upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin:30upx auto 0;
		flex-wrap: wrap;
		.goods_item{
			width: 48%;
			margin-right: 2%;
			background-color: #FFFFFF;
			box-shadow: 0px 8upx 16upx rgba(0, 0, 0, 0.08);
			border-radius: 15upx;
			padding: 30upx 15upx;
			margin-bottom: 30upx;
			.goods_img{
				image{
					width: 300upx;
					height: 260upx;
					border-radius: 10upx;
				}
			}
			.goods_name{
				margin-top: 20upx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.tian{
					width: 45upx;
					height: 30upx;
					text-align: center;
					line-height: 22upx;
					border: 2px solid #DC3545;
					font-size: 16upx;
					color: #DC3545;
				}
				.mz{
					margin-left: 10upx;
					width: 200upx;
					font-size: 28upx;
					color: #444;
					font-weight: 600;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			.goods_sub{
				width: 200upx;
				margin-top: 20upx;
				font-size: 24upx;
				color: #999999;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.goods_dz{
				margin-top: 20upx;
				font-size: 24upx;
				color: #999999;
			}
			.goods_jg{
				margin-top: 20upx;
				font-size: 28upx;
				font-weight: bold;
				color: #EE0A24;
			}
		}
	}
	.shop_list{
		margin-top: 30upx;
		.shop_item{
			width: 640upx;
			padding: 30upx;
			margin: 0 auto 30upx;
			background-color: #FFFFFF;
			box-shadow: 0px 8upx 16upx rgba(0, 0, 0, 0.08);
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-radius: 15upx;
			.shop_left{
				image{
					width: 110upx;
					height: 110upx;
					border-radius: 10upx;
				}
			}
			.shop_right{
				margin-left: 30upx;
				.shop_name{
					width: 340upx;
					font-size: 30upx;
					font-weight: bold;
					color: #333333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.shop_sub{
					font-size: 24upx;
					color: #999;
					margin-top: 60upx;
				}
			}
		}
	}
	.kong{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 360upx;
		.zhongjian{
			text-align: center;
			image{
				width: 180upx;
				height: 180upx;
			}
			.title{
				font-size: 28upx;
				color:#dd3030;
			}
		}
	}
}
</style>
